<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传功能测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
        .upload-btn { 
            background: #3b82f6; 
            color: white; 
            padding: 10px 20px; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            margin: 10px 0;
        }
        .upload-btn:hover { background: #2563eb; }
        .result { margin: 10px 0; padding: 10px; background: #f3f4f6; border-radius: 4px; }
        .success { background: #d1fae5; color: #065f46; }
        .error { background: #fee2e2; color: #991b1b; }
    </style>
</head>
<body>
    <h1>MD文件上传功能测试</h1>
    
    <div class="test-section">
        <h2>测试1: 基本文件上传</h2>
        <input type="file" id="testFileInput" accept=".md,.markdown,.txt" />
        <button class="upload-btn" onclick="testFileUpload()">测试上传</button>
        <div id="testResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>测试2: 拖拽上传</h2>
        <div id="dropZone" 
             style="width: 300px; height: 200px; border: 2px dashed #ccc; border-radius: 8px; display: flex; align-items: center; justify-content: center;"
             ondrop="handleDrop(event)" 
             ondragover="handleDragOver(event)" 
             ondragleave="handleDragLeave(event)">
            <p>拖拽MD文件到这里</p>
        </div>
        <div id="dropResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>测试3: 文件内容显示</h2>
        <textarea id="contentDisplay" rows="10" cols="80" placeholder="文件内容将显示在这里..."></textarea>
    </div>

    <script>
        // 测试文件上传
        function testFileUpload() {
            const fileInput = document.getElementById('testFileInput');
            const file = fileInput.files[0];
            
            if (!file) {
                showResult('testResult', '请先选择文件', 'error');
                return;
            }
            
            showResult('testResult', `选择的文件: ${file.name} (${file.type})`, 'success');
            handleFile(file);
        }
        
        // 拖拽处理
        function handleDrop(event) {
            event.preventDefault();
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                showResult('dropResult', `拖拽文件: ${files[0].name}`, 'success');
                handleFile(files[0]);
            }
        }
        
        function handleDragOver(event) {
            event.preventDefault();
            event.target.style.borderColor = '#3b82f6';
            event.target.style.backgroundColor = '#eff6ff';
        }
        
        function handleDragLeave(event) {
            event.preventDefault();
            event.target.style.borderColor = '#ccc';
            event.target.style.backgroundColor = 'transparent';
        }
        
        // 文件处理
        function handleFile(file) {
            console.log('处理文件:', file.name, file.type, file.size);
            
            // 检查文件类型
            const isValidFile = file.name.endsWith('.md') || 
                              file.name.endsWith('.markdown') || 
                              file.type === 'text/markdown' ||
                              file.type === 'text/plain';
            
            if (!isValidFile) {
                showResult('dropResult', '无效的文件类型，请选择.md或.markdown文件', 'error');
                return;
            }
            
            // 读取文件内容
            const reader = new FileReader();
            
            reader.onload = (e) => {
                const content = e.target.result;
                document.getElementById('contentDisplay').value = content;
                showResult('dropResult', `文件上传成功！内容长度: ${content.length} 字符`, 'success');
            };
            
            reader.onerror = (e) => {
                showResult('dropResult', '文件读取失败', 'error');
            };
            
            reader.readAsText(file, 'UTF-8');
        }
        
        // 显示结果
        function showResult(elementId, message, type) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
        }
        
        console.log('测试页面加载完成');
    </script>
</body>
</html>


